﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0"/>
<title>Rain CSS </title>
<style>
@-webkit-keyframes spin {from {-webkit-transform: rotateY(0)}to {-webkit-transform: rotateY(360deg)}}
@-ms-keyframes spin {from {ms-transform: rotateY(0)}to {ms-transform: rotateY(360deg)}}
@keyframes spin {from {transform: rotateY(0)}to {transform: rotateY(360deg)}}
@-webkit-keyframes spin-vertical {from {-webkit-transform: rotateX(0)}to {-webkit-transform: rotateX(-360deg)}}
@-ms-keyframes spin-vertical {from {ms-transform: rotateX(0)}to {ms-transform: rotateX(-360deg)}}
@keyframes spin-vertical {from {transform: rotateX(0)}to {transform: rotateX(-360deg)}}
.wrap {
 -webkit-perspective: 400px;
 -webkit-perspective-origin: 50% -150px;
 -moz-perspective: 400px;
 -moz-perspective-origin: 50% -150px;
 -ms-perspective: 400px;
 -ms-perspective-origin: 50% -150px;
 perspective: 400px;
 perspective-origin: 50% -150px;
}

.cube {
 position: relative;
 width: 100px;
 height:200px;
 margin: 20px auto;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-animation: spin 1s infinite linear;
 -moz-animation: spin 1s infinite linear;
 -ms-animation: spin 1s infinite linear;
 animation: spin 1s infinite linear;
}

.cube div {
 position: absolute;
 width: 100px;
 height: 100px;
 background: rgba(255, 255, 255, 0.1);
 box-shadow: inset 0 0 30px rgba(125, 125, 125, 0.8);
 font-size: 20px;
 text-align: center;
 line-height: 100px; 
 font-family: sans-serif;
 text-transform: uppercase;
}

.cube .back{
 -webkit-transform: translateZ(-50px) rotateY(180deg);
 -moz-transform: translateZ(-50px) rotateY(180deg);
 -ms-transform: translateZ(-50px) rotateY(180deg);
 transform: translateZ(-50px) rotateY(180deg)
}

.cube .right {
 -webkit-transform: rotateY(-270deg) translateX(50px);
 -webkit-transform-origin: right center;
 -moz-transform: rotateY(-270deg) translateX(50px);
 -moz-transform-origin: right center;
 -ms-transform: rotateY(-270deg) translateX(50px);
 -ms-transform-origin: right center;
 transform: rotateY(-270deg) translateX(50px);
 transform-origin: right center;
}

.cube .left {
 -webkit-transform: rotateY(270deg) translateX(-50px);
 -webkit-transform-origin: center left;
 -moz-transform: rotateY(270deg) translateX(-50px);
 -moz-transform-origin: center left;
 -ms-transform: rotateY(270deg) translateX(-50px);
 -ms-transform-origin: center left;
 transform: rotateY(270deg) translateX(-50px);
 transform-origin: center left
}

.cube .top {
 -webkit-transform: rotateX(-90deg) translateZ(-50px);
 -webkit-transform-origin: center center;
 -moz-transform: rotateX(-90deg) translateZ(-50px);
 -moz-transform-origin: center center;
 -ms-transform: rotateX(-90deg) translateZ(-50px);
 -ms-transform-origin: center center;
 transform: rotateX(-90deg) translateZ(-50px);
 transform-origin: center center;
}

.cube .bottom {
 -webkit-transform: rotateX(90deg) translateZ(-50px);
 -webkit-transform-origin: center center;
 -moz-transform: rotateX(90deg) translateZ(-50px);
 -moz-transform-origin: center center;
 -ms-transform: rotateX(90deg) translateZ(-50px);
 -ms-transform-origin: center center;
 transform: rotateX(90deg) translateZ(-50px);
 transform-origin: center center;
}

.cube .front{
 -webkit-transform: translateZ(50px);
 -moz-transform: translateZ(50px);
 -ms-transform: translateZ(50px);
 transform: translateZ(50px)
}
.wrap.flat {
 -webkit-perspective: none;
 -webkit-perspective-origin: 0 0;
 -moz-perspective: none;
 -moz-perspective-origin: 0 0;
 -ms-perspective: none;
 -ms-perspective-origin: 0 0;
 perspective: none;
 perspective-origin: 0 0
}
 
</style>
</head>
<body class="body">
	<div class="container mt">
   <div class="wrap">
    <div class="cube">
     <div class="front">前</div>
     <div class="back">后</div>
     <div class="top">上</div>
     <div class="bottom">下</div>
     <div class="left">左</div>
     <div class="right">右</div>
    </div>
   </div>
 </div>
</body>
</html>
